<template>
    <div class="">
        <div class="" v-if="show">
            <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="formInline">
                <el-form-item label="订单号" prop="orderId">
                    <el-input v-model="formInline.orderId" placeholder="请输入订单号"></el-input>
                </el-form-item>
                <el-form-item label="送货方式" prop="method">
                    <el-select v-model="formInline.method" placeholder="请输入送货方式">
                        <el-option v-for="item in options" :key="item.method" :label="item.label" :value="item.method"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="送货仓库" prop="wId">
                    <el-select v-model="formInline.wId" placeholder="请选择送货仓库">
                        <el-option v-for="item in option" :key="item.wId" :label="item.name" :value="item.wId"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>
                    <el-button @click="Reset('formInline')" icon="el-icon-refresh">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="Newexportsearchrefresh">
            <el-button type="warning" plain icon="el-icon-download">导出</el-button>
                            <div class="Searchrefresh">
                    <el-tooltip placement="top">
                        <div slot="content">{{ disabled ? '显示搜索' : '隐藏搜索' }}</div>
                        <el-button icon="el-icon-search" circle @click="Showorhide()"> </el-button>
                    </el-tooltip>
                    <el-tooltip content="刷新" placement="top">
                        <el-button icon="el-icon-refresh-left" circle @click="Reset()"></el-button>
                    </el-tooltip>
                </div>
        </div>
        <!-- 页面渲染 -->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="50" align="center"> </el-table-column>
            <el-table-column prop="orderId" label="订单号" width="150" align="center"> </el-table-column>
            <el-table-column prop="method" label="送货方式" :formatter="formettar" align="center"> </el-table-column>
            <el-table-column prop="arrive" label="预计到达时间" width="180" align="center"> </el-table-column>
            <el-table-column prop="contacts" label="货主联系方式" width="150" align="center"> </el-table-column>
            <el-table-column prop="wId" label="送货仓库" :formatter="wIdFormat" align="center"> </el-table-column>
            <el-table-column prop="plate" label="车船号牌" align="center"> </el-table-column >
            <el-table-column prop="belongName" label="所属客户" align="center"> </el-table-column>
           <el-table-column prop="status" label="订单状态" align="center">
                <template slot-scope="scope">
                    {{ scope.row.status == 2 ? '审核未通过' : scope.row.status == 1 ? '通过' : '审核中' }}
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="350" align="center">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
                    <el-button type="text" size="small" @click="see(scope.row)">查看货品</el-button>
                    <el-button type="text" size="small" @click="toexamine(scope.row)">审核</el-button>
                    <el-button type="text" size="small" @click="Administrative(scope.row.id)">管理费用项</el-button>
                    <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
                    <el-button type="text" size="small" @click="Print(scope.row)">打印条形码</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
            style="float:right;"
            background
            v-if="hid"
                @size-change="handleSizeChang"
                @current-change="handleCurrentChang"
                :current-page="formInline.pageNum"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="formInline.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>
        <!-- 修改 -->
        <div class="box">
        <el-dialog title="修改入库订单" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="订单号" :label-width="formLabelWidth">
                    <el-input v-model="form.orderId" autocomplete="off" placeholder="请输入订单号"></el-input>
                </el-form-item>
                <el-form-item label="送货方式" :label-width="formLabelWidth">
                    <el-select v-model="form.method" placeholder="请输入送货方式" style="width:100%">
                        <el-option v-for="item in options" :key="item.method" :label="item.label" :value="item.method"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="预计到达时间" :label-width="formLabelWidth">
                    <el-date-picker style="width:100%" v-model="form.arrive" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"> </el-date-picker>
                </el-form-item>
                <el-form-item label="货主联系方式" :label-width="formLabelWidth" style="width:100%">
                    <el-input v-model="form.contacts" autocomplete="off" placeholder="请输入订单号"></el-input>
                </el-form-item>
                <el-form-item label="送货仓库" :label-width="formLabelWidth" >
                    <el-select v-model="form.wId" placeholder="请选择送货仓库" style="width:100%">
                        <el-option v-for="item in option" :key="item.wId" :label="item.name" :value="item.wId"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="车船号牌" :label-width="formLabelWidth" style="width:100%"> 
                    <el-input v-model="form.plate" autocomplete="off" placeholder="请输入订单号"></el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="modifye">确 定</el-button>
            </div>
        </el-dialog>
        </div>
        <!-- 审核 -->
        <div class="toexamine"></div>
        <el-dialog title="入库订单" :visible.sync="dialogTableVisible">
            <el-descriptions title="运单信息" :column="4" border size="medium">
                <el-descriptions-item label="编号">{{ Auditlist.orderId }}</el-descriptions-item>
                <el-descriptions-item label="运货仓库">{{ Auditlist.wId }}</el-descriptions-item>
                <el-descriptions-item label="货主联系人">{{ Auditlist.contacts }}</el-descriptions-item>
                <el-descriptions-item label="车船牌号">
                    {{ Auditlist.plate }}
                </el-descriptions-item>
                <el-descriptions-item label="预计到货时间" :contentStyle="{ 'text-align': 'left' }">{{
                    Auditlist.arrive
                }}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="我方应付费用项" :column="3" border size="medium">
                <el-descriptions-item label="托运费">{{ Auditlist.cost[0].mnumber }}</el-descriptions-item>
                <el-descriptions-item label="停车费">{{ Auditlist.cost[1].mnumber }}</el-descriptions-item>
                <el-descriptions-item label="地面服务费">{{ Auditlist.cost[2].mnumber }}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="货主应付费用项" :column="3" border size="medium">
                <el-descriptions-item label="托运费">{{ Auditlist.cost[0].hnumber }}</el-descriptions-item>
                <el-descriptions-item label="停车费">{{ Auditlist.cost[1].hnumber }}</el-descriptions-item>
                <el-descriptions-item label="地面服务费">{{ Auditlist.cost[2].hnumber }}</el-descriptions-item>
            </el-descriptions>
            <el-table :data="Warehousinglist" style="width: 100%">
                <el-table-column type="index" label="序号" width="50" align="center"> </el-table-column>
                <el-table-column prop="product.number" label="货品编号" width="120" align="center"> </el-table-column>
                <el-table-column prop="product.name" label="货品名称" align="center"> </el-table-column>
                <el-table-column prop="stock" label="订单数量" width="120" align="center"> </el-table-column>
                <el-table-column prop="realStock" label="入库数量" width="120" align="center"> </el-table-column>
                <el-table-column prop="product.spec" label="规格" width="120" align="center"> </el-table-column>
                <el-table-column prop="product.code" label="条码" align="center"> </el-table-column>
                <el-table-column prop="product.brand" label="品牌" align="center"> </el-table-column>
                <el-table-column prop="product.shelvesName" label="货架" align="center"> </el-table-column>
                <el-table-column fixed="right" label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <el-button @click="handleClic(scope.row.infoId)" type="text" size="small">入库数量</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                style="float:right;"
            background
            v-if="hide"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="WarehousingPagination.pageNum"
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="WarehousingPagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tatal"
                >
                </el-pagination>
            </div>
            <div class="buttonbox">
            <el-button type="primary" @click="adopt">通过</el-button>
            <el-button type="danger" @click="refuse">拒绝</el-button>
            </div>
        </el-dialog>
        <!-- 修改数量 -->
        <div class="box">
        <el-dialog title="收货地址" :visible.sync="dialogFormVisibl">
  <el-form :model="form">
    <el-form-item label="请输入数量" :label-width="formLabelWidth">
      <el-input v-model="modify.realStock" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisibl = false">取 消</el-button>
    <el-button type="primary" @click="Modifiedquantity">确 定</el-button>
  </div>
</el-dialog>
</div>
        <!-- 管理费用项 -->
        <el-dialog
  title="管理费用项"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
   <el-table :data="gridData">
    <el-table-column property="name" label="项目名称" width="150"></el-table-column>
    <el-table-column property="mnumber" label="我方应付" width="100">
        <template slot-scope="scope">
<el-input v-model="scope.row.mnumber" ></el-input>
        </template>
    </el-table-column>
    <el-table-column property="hnumber" label="货主应付">
                <template slot-scope="scope">
<el-input v-model="scope.row.hnumber" ></el-input>
        </template>
    </el-table-column>
  </el-table>
  <div style="height:50px; display: flex;
    justify-content:flex-end;
    align-items:center;">
    <el-button @click="management">确 定</el-button>
    </div>
</el-dialog>
        <div class="syu">
         <el-dialog title="打印条形码" :visible.sync="dialogbarcode">
             <!-- <template> -->
                 <div id="printMe">
                     <svg id="barcode"></svg>
                 </div>
                 
             <!-- </template> -->
             <div class="bu" style="display:flex; justify-content:flex-end">
                 <el-button @click="dialogbarcode = false">取 消</el-button>
    <el-button v-print="'#printMe'" type="primary" @click="dialogbarcode = false">打印</el-button>
             </div>
         </el-dialog>
         </div>
    </div>
</template>

<script>
import { 
    Warehousedata, 
    Orderdata, 
    Modifyorder, 
    Commodityconf, 
    quantity, 
    Byconfirmation, 
    Byrefusing,
    expenseitem,
    orderdel,
     } from '@/api/user';
export default {
    data() {
        return {
            // 搜索框
            formInline: {
                pageNum: 1,
                pageSize: 10
            },
            // 总条目数
            total: undefined,
            // 运货方式
            options: [
                {
                    method: 0,
                    label: '汽车'
                },
                {
                    method: 1,
                    label: '船运'
                },
                {
                    method: 2,
                    label: '自提'
                },
                {
                    method: 3,
                    label: '火车'
                },
                {
                    method: 4,
                    label: '零担'
                },
                {
                    method: 5,
                    label: '专车'
                },
                {
                    method: 6,
                    label: '快递'
                }
            ],
            // 运货仓库
            option: [],
            // 数据
            tableData: [],
            // 修改弹窗
            dialogFormVisible: false,
            // 修改表单
            form: {},
            // 审核
            dialogTableVisible: false,
            // 审核列表
            Auditlist: {
                cost: [
                    {
                        mnumber: '0',
                        hnumber: '0'
                    },
                    {
                        mnumber: '0',
                        hnumber: '0'
                    },
                    {
                        mnumber: '0',
                        hnumber: '0'
                    }
                ]
            },
            // 入库数据分页
            WarehousingPagination: {
                pageNum: 1,
                pageSize: 10
            },
            // 入库数据总条目数
            tatal: undefined,
            // 入库数据
            Warehousinglist: [],
            // 修改数量
            dialogFormVisible: false,
            // 修改数据表单
            modify: {},
            // 拒绝
            Fail: {},
            // 管理费用项弹窗
            dialogVisible:false,
            // 管理费用项
            gridData:[],
            grdData:[],
            formLabelWidth: '120px',
            hide:false,
            hid:false,
            // 显示隐藏
            show: true,
            disabled: false,
            dialogbarcode:false,
            dialogFormVisibl:false
        };
    },
    methods: {
        // 送货仓库
        Deliverywarehouse() {
            Warehousedata().then((ref) => {
                // console.log(ref.rows);
                this.option = ref.rows;
            });
        },
        // 搜索
        search() {
            Orderdata(this.formInline).then((ref) => {
                // console.log(ref);
                this.hid = true
                this.tableData = ref.rows;
                this.total = ref.total;
            });
        },
        // 重置
        Reset(formName) {
            // console.log(1);
            this.$refs.formInline.resetFields();
            this.search();
        },
        // 所属客户分页
        handleSizeChang(val) {
            this.formInline.pageSize = Number(val);
            this.search();
        },
        // 所属客户分页（页数）
        handleCurrentChang(val) {
            this.formInline.pageNum = Number(val);
            this.search();
        },
        // 修改弹窗
        handleClick(val) {
            this.form = val;
            this.dialogFormVisibl = true;
        },
        // 修改确认
        modifye() {
            Modifyorder(this.form).then((ref) => {
                console.log(ref);
                this.dialogFormVisible = false;
                this.search();
                this.$message({
                        type: 'success',
                        message: '修改成功'
                    });
            });
        }, //表格数据格式化
        wIdFormat(row) {
            for (var i = 0; i < this.option.length; i++) {
                if (this.option[i].wId == row.wId) {
                    return this.option[i].name;
                }
            }
        },
        // 表格数据格式化2
        formettar(row){
            // console.log(row.method);
            for(var a =0;a<this.options.length;a++){
                if(this.options[a].method == row.method){
                    return this.options[a].label
                }
            }
        },
        // 查看货品
        see(val) {
            // console.log(val);
            this.$router.push({
                path: '/form',
                query: {
                    val
                }
            });
        },
        // 审核
        toexamine(val) {
            console.log(val);
            this.WarehousingPagination.oId = val.id;
            this.Fail.id = val.id;
            this.Auditlist = val;
            this.dialogTableVisible = true;
            if (this.Auditlist.cost) {
                this.Auditlist.cost = eval(this.Auditlist.cost);
            } else {
                this.Auditlist.cost = [
                    {
                        mnumber: '0',
                        hnumber: '0'
                    },
                    {
                        mnumber: '0',
                        hnumber: '0'
                    },
                    {
                        mnumber: '0',
                        hnumber: '0'
                    }
                ];
            }
            this.sh();
        },
        // 分页（多少个）
        handleSizeChange(val) {
            this.WarehousingPagination.pageSize = Number(val);
            this.sh();
        },
        // 分页（页数）
        handleCurrentChange(val) {
            this.WarehousingPagination.pageNum = Number(val);
            this.sh();
        },
        // 修改数量弹窗
        handleClic(val) {
            this.modify.infoId = val;
            this.dialogFormVisibl = true;
        },
        // 修改数量
        Modifiedquantity() {
            // this.dialogFormVisible = true;
            quantity(this.modify).then((ref) => {
                console.log(ref);
                this.dialogFormVisibl = false;
                this.sh();2
                this.$message({
                        type: 'success',
                        message: '修改成功'
                    });
            });
        },
        // 审核数据
        sh() {
            Commodityconf(this.WarehousingPagination).then((ref) => {
                // console.log(ref);
                this.Warehousinglist = ref.rows;
                this.tatal = ref.total;
                if(ref.rows == ''){
this.hide =false
                }else{
                    this.hide =true
                }
                
            });
        },
        // 通过
        adopt() {
            this.$confirm('确定通过审核吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                Byconfirmation(this.WarehousingPagination.oId).then((ref) => {
                    console.log(ref);
                    this.dialogTableVisible = false;
                    this.search();
                    this.$message({
                        type: 'success',
                        message: '审核成功'
                    });
                });
            });
        },
        // 拒绝
        refuse() {
            this.Fail.status = 2;
            Byrefusing(this.Fail).then((ref) => {
                console.log(ref);
                this.dialogTableVisible = false;
            });
        },
        // 管理费用项
        Administrative(val){
            expenseitem(val).then((ref)=>{
                // console.log(ref.data.cost);
                this.grdData = ref.data
                if(this.grdData.cost == '')
                {
                    this.gridData = [
                    {
                        name:'托运费',
                        mnumber: '0',
                        hnumber: '0'
                    },
                    {
                        name:'停车费',
                        mnumber: '0',
                        hnumber: '0'
                    },
                    {
                       name:'地面服务费',
                        mnumber: '0',
                        hnumber: '0'
                    }
                ]
                }else{
this.gridData = JSON.parse(this.grdData.cost)
                }
                
                // console.log(this.gridData);
                this.dialogVisible = true
            })
        },
        // 修改管理费用
        management(){
        this.grdData.cost = JSON.stringify(this.gridData)
        // console.log(this.grdData);
        this.dialogVisible = false
        Modifyorder(this.grdData).then((ref)=>{
            console.log(ref);
            this.search()
            this.$message({
                        type: 'success',
                        message: '修改成功'
                    });
        })
        },
        // 管理费用项弹窗关闭
        handleClose(done){
            done();
      },
    //   删除
    del(id){
         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            orderdel(id).then((ref)=>{
            this.search()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        
    },
    // 显示隐藏
        Showorhide() {
            (this.show = !this.show), (this.disabled = !this.disabled);
        },
                Print(val){
                    console.log(val);
            this.dialogbarcode =true
            setTimeout(() => {

JsBarcode("#barcode",val.orderId)
}, 0)
    

        }
    },
    mounted() {
        // 送货仓库
        this.Deliverywarehouse();
        // 数据
        this.search();
    }
};
</script>

<style lang="less" scoped>
/deep/.el-form--inline .el-form-item__label{
    font-weight: 700 !important;
}
.Addexport{
    height: 50px;
}
.box/deep/.el-dialog{
    width: 35% !important;
}
.toexamine/deep/.el-dialog{
    width: 80% !important;
}
/deep/.el-descriptions__body{
    margin-bottom: 20px;
}
.block{
    height: 20px;
    margin-top: 10px;
}
.buttonbox{
    width: 100%;
    height: 60px;
    display: flex;
    justify-content:flex-end;
    align-items:center;
}
.Newexportsearchrefresh {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
#printMe{
    text-align:center;
}
/deep/.el-dialog{
    width: 70% !important;
}
</style>

